<template>
  <div class="all">
    <div class="header">
      <van-icon size="20px" class="back" @click="back" name="arrow-left" />
    </div>
    <div class="total">
      <img src="@/assets/fangrule.png" alt="" class="bgimg" v-if="cur==0"/>
      <img src="@/assets/zurule.png" alt="" class="bgimg" v-if="cur==1"/>
      <img src="@/assets/yerule.png" alt="" class="bgimg" v-if="cur==2"/>
      <img src="@/assets/mairule.png" alt="" class="bgimg" v-if="cur==3"/>
      <div class="totalimg">
        <img src="@/assets/fang_act.png" alt="" class="img_act" @click="fang" v-if="show1"/>
        <img src="@/assets/fang.png" alt="" class="img_noact" @click="fang" v-if="!show1"/>
        <img src="@/assets/zu_act.png" alt=""  class="img_act" @click="zu" v-if="show2"/>
        <img src="@/assets/zu.png" alt=""  class="img_noact" @click="zu" v-if="!show2"/>
        <img src="@/assets/ye_act.png" alt=""  class="img_act" @click="ye" v-if="show3"/>
        <img src="@/assets/ye.png" alt=""  class="img_noact" @click="ye" v-if="!show3"/>
        <img src="@/assets/mai_act.png" alt="" class="img_act" @click="mai" v-if="show4"/>
        <img src="@/assets/mai.png" alt="" class="img_noact" @click="mai" v-if="!show4"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cur:0,
      show1:true,
      show2:true,
      show3:true,
      show4:true,
      
    };
  },
  created () {
    this.fang()
  },
  methods: {
    fang(){
      this.cur=0
      this.show1=true
      this.show2=false
      this.show3=false
      this.show4=false
    },
    zu(){
      this.cur=1
      this.show1=false
      this.show2=true
      this.show3=false
      this.show4=false
    },
    ye(){
      this.cur=2
      this.show1=false
      this.show2=false
      this.show3=true
      this.show4=false
    },
    mai(){
      this.cur=3
      this.show1=false
      this.show2=false
      this.show3=false
      this.show4=true
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.all {
  overflow: hidden;
  position: relative;
  .total{
    position: relative;
  }
  .totalimg{
    display: flex;
    width: 94vw;
    position: absolute;
    top:109vw;
    left: 3vw;
    justify-content: space-evenly;
    .img_noact{
      width: 22.6vw;
      height: 18.6vw;
    }
    .img_act{
      width: 22.6vw;
      height: 20.8vw;
    }
  }
  .header {
    padding: 15px;
    padding-bottom: 5px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);
    position: fixed;
    left: 0;
    top: 0;
    color: #333;
  }
  .bgimg {
    width: 100%;
  }
}
</style>